<html lang="en">
<head>
    <meta charset="UTF-8">
</head>

<body>
<h1>乘客监听测试页面-模拟客户端</h1>
<button onclick="setMessageContent('鼠标点我了')">测试message展示</button>
<div id="message">展示推送过来的消息的地方</br></div>
<button onclick="sourceClose()">关闭连接</button>
<script>
    userId = "1814297765962960898";
    identity = 1;
    source = null;
    if(window.EventSource){
        console.info("浏览器支持SSE");
        //连接的建立
        source = new EventSource("http://localhost:9000/connect?userId="+userId+"&identity="+identity);

        //监听服务端推送的信息
        source.addEventListener("message",function (e){
            content = e.data;
            console.info("消息内容:"+content);
            setMessageContent(content)
        });

    }else{
        setMessageContent("此浏览器不支持")
    }

    function setMessageContent(content){
        document.getElementById("message").innerHTML+=(content+'</br>');
    }

    function sourceClose(){
        console.info("close方法执行")
        //客户端的关闭
        source.close();
        //服务端map的关闭
        httpRequest = new XMLHttpRequest();
        httpRequest.open("get","http://localhost:9000/close?userId="+userId+"&identity="+identity);
        httpRequest.send();
    }
</script>
</body>
</html>